<script setup lang="ts">
import { ref,onMounted } from 'vue';
import  { AxiosResponse } from "axios";
import { getShangData } from "../api";
import { useRoute } from "vue-router";

const route = useRoute();

const onClickLeft = () => history.back();
  const images = ref<string[]>([])
    const data = ref<any>(); // 存储接口数据

  
   const gettData = async () => {
  try {
    // const tid = 1; 
     const tid = route.query.tid; 
    const res: AxiosResponse<{ data: any }> = await getShangData(Number(tid))
    console.log(res.data);
   //图片路径
    const baseUrl = 'http://39.105.198.203:3001';
    const fullTimgPath = `${baseUrl}/${res.data.data.timg}`;
    data.value = {
      ...res.data.data,
      timg: fullTimgPath,
    };

    images.value = res.data.data.imgarr || []; // 默认
    
  } catch (error) {
    console.error('请求失败:', error);
  }
};
    onMounted(() => {
  gettData();
}); 
</script>

<template>
    <div >
      <div>
        <van-nav-bar
  title="详情"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
      </div>
      <div class="container">
          <div class="content">
              <div class="home">
                   <div class="my-swipe van-swipe">
              <van-swipe :autoplay="3000" lazy-render >
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image"  width="100%" height="200px"/>
  </van-swipe-item>
</van-swipe>
           </div> 
           <!-- 动态绑定商品信息 -->
<div class="wu" v-if="data">
  <van-card
    :price="data.price"
    :desc="data.tintro"
    :title="data.tname"
    :thumb="data.timg"
  />
</div>
           <div v-if="data"><img :src="data.banner" alt="" height="420px" width="100%"></div>
      </div>
              </div>
          </div>
          
       <div>
            <van-action-bar >
  <van-action-bar-icon icon="chat-o" text="客服" />
  <van-action-bar-icon icon="cart-o" text="购物车" />
  <van-action-bar-button color="#9ACD32" type="warning" text="加入购物车" />
  <van-action-bar-button color="#008000" type="danger" text="立即购买" />
</van-action-bar>

       </div>
    </div>
</template>

<style scoped>
.container {
  position: relative;
  min-height: 100vh;
  background-color: rgb(246, 245, 245);
}

.content {
  margin-bottom: 60px; /* 留出底部导航栏的空间 */
}

.home {
  position: relative;
  height: auto;
}

.wu{
  margin-top: 10px;
}
 .my-swipe .van-swipe-item {
  width: 100%;
  height: 200px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

.container {
  position: relative;
  min-height: 100vh;
  background-color: rgb(233, 233, 233);
}
</style>